<script setup lang="ts">
import {
  businessCreateItem,
  businessCreateShop,
  businessListShopItems,
  businessListShops,
  ListAllItems,
  listShops, shopAddShopItem, shopListAvailableItem, shopOffShelf, shopOnShelf
} from "../network/api.ts";
import {reactive, ref} from "vue";
import Footer from "../components/BusinessFooter.vue";
import router from "../Router";
import {useRoute} from "vue-router";
import axios from "axios";
const route = useRoute()

let shop = ref({
  id:route.query.shopId
})
let shopItemArr = ref()
let itemArr = ref()
let itemName = ref()

businessListShopItems(shop.value).then(res=>{
  // console.log(res.data.shopItems)
  shopItemArr.value = res.data.shopItems
  for(let i =0;i<shopItemArr.value.length;i++){
    if(shopItemArr.value[i].shelfStatus==0){
      shopItemArr.value[i].shelfStatus2="×"
    }else{
      shopItemArr.value[i].shelfStatus2="√"
    }
  }
  console.log("shopItemArr.value:")
  console.log(shopItemArr.value)
})
console.log("sessionStorage.getItem('userId'):",sessionStorage.getItem("userId"))
console.log("route.query.shopId:",route.query.shopId)
// function toShopItemPage(index){
//   console.log(index)
//   router.push({
//     path:"/business/listShopItems",
//     query:{index:index}
//   })
// }

shopListAvailableItem(sessionStorage.getItem("userId")).then(res=>{
  itemArr.value = res.data
  console.log(itemArr.value.length)
  for(let i=0; i<itemArr.value.length; i++){
    itemArr.value[i].price="";
    //人为给itemArr数组增加price字段.解决深浅拷贝问题
  }
  console.log("itemArr.value:")
  console.log(itemArr.value)
})

function addShopItem(index){
  shopAddShopItem(
                  route.query.shopId,
                  itemArr.value[index].id,
                  itemArr.value[index].price
  ).then(res=>{
    console.log(res.data)
    businessListShopItems(shop.value).then(res=>{
      // console.log(res.data.shopItems)
      shopItemArr.value = res.data.shopItems
      for(let i =0;i<shopItemArr.value.length;i++){
        if(shopItemArr.value[i].shelfStatus==0){
          shopItemArr.value[i].shelfStatus2="×"
        }else{
          shopItemArr.value[i].shelfStatus2="√"
        }
      }
      console.log("shopItemArr.value:")
      console.log(shopItemArr.value)
    })
  })
}

function createItem(){
  let item = ref({
    itemName:itemName.value
  })
  businessCreateItem(item.value).then(res => {
    console.log(res.data)
    console.log("res.data.id:",res.data.id)
    if(res.data.id==undefined){
      alert("item库已有此商品或其他商家含有此商品,无法创建")
      return
    }
    shopListAvailableItem(sessionStorage.getItem("userId")).then(res=>{
      itemArr.value = res.data
      console.log(itemArr.value.length)
      for(let i=0; i<itemArr.value.length; i++){
        itemArr.value[i].price="";
        //人为给itemArr数组增加price字段.解决深浅拷贝问题
      }
      console.log("itemArr.value:")
      console.log(itemArr.value)
    })
  })
}



function onShelf(index){
  shopOnShelf(route.query.shopId,shopItemArr.value[index].item.id).then(res=>{
    console.log(res.data)
    shopItemArr.value[index].shelfStatus2="√"
    //这里没必要再调接口,让界面展示一致就行,因为重新进入的时候就会一样显示
  })
}
function offShelf(index){
  shopOffShelf(route.query.shopId,shopItemArr.value[index].item.id).then(res=>{
    console.log(res.data)
    shopItemArr.value[index].shelfStatus2="×"
  })
}
</script>

<template>
  <header class="title flex justify-center items-center bg-blue border-blue-600 ">
    <div class="text-white select-none flex justify-center items-center gap-5">
      <p class="text-5vw">{{route.query.shopName}}店</p>
      <h1>Shop Items</h1>
    </div>
  </header>


  <el-scrollbar class="mt-3vw w-full">
    <el-table :data="shopItemArr" height="260" style="width:100%"
    >
      <el-table-column type="index" width="3"/>
      <el-table-column  prop="shopItemName" label="商品名称" width="115" align="center"/>
      <el-table-column prop="price" label="价格" width="70" align="center"/>
      <el-table-column prop="shelfStatus2" label="上架" width="40" align="center"/>
      <el-table-column label="操作"  width="140" align="center">
        <template #default="scope">
          <el-button type="primary" size="small"
                     @click="onShelf(scope.$index)"
                     :disabled="shopItemArr[scope.$index].shelfStatus2=='√'"
          >
            上架
          </el-button>
          <el-button type="info" size="small"
                     @click="offShelf(scope.$index)"
                     :disabled="shopItemArr[scope.$index].shelfStatus2=='×'"
          >
           下架
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="flex justify-center items-center h-10vw mb-2vw">
      所有商品
    </div>
    <div class="flex justify-start items-center gap-3vw mb-5vw font-light">
      <div class="flex justify-center items-center w-10vw mr-1vw">序号</div>
      <div class="flex justify-start items-center w-30vw">商品名称</div>
      <div class="grow flex justify-center items-center">操作</div>
    </div>
    <el-scrollbar height="163">
      <div v-for="(item,index) in itemArr" class="font-light flex justify-start items-center gap-3vw mb-5vw">
        <div class="flex justify-center items-center w-10vw mr-1vw">{{index+1}}</div>
        <div class="flex justify-start items-center w-27vw">{{item?.itemName}}</div>

        <input  placeholder="set price(元)" class="w-25vw h-6vw outline-none border-gray-1 rounded-xl"
                   v-model="itemArr[index].price"
        />
        <div>
          <button disabled class="bg-blue-2 rounded-1 border-none outline-none p-2vw cursor-not-allowed"
               v-show="itemArr[index].price==''">
            加进门店
          </button>
          <button v-show="itemArr[index].price!=''"
                  class="bg-blue-4 rounded-1 text-white border-none outline-none p-2vw"
                  @click="addShopItem(index)"
          >
            加进门店
          </button>
        </div>
      </div>
    </el-scrollbar>
    <div class="flex mt-1.5vw  items-center justify-center w-full gap-2vw ">
      <el-input placeholder="input a item name to create a item"
                class="mx-1vw h-10vw mt-2vw"
                v-model="itemName"
      ></el-input>
      <el-button type="primary" class="mt-3vw mr-2vw"
                 @click="createItem"
      >
        创建商品
      </el-button>
    </div>

  </el-scrollbar>


  <Footer></Footer>


</template>

<style scoped>

</style>